<!--
    * Time    : 2020-12-31 14:00:00
    * Author  : zhangTj
    * Desc    : 团购咨询
-->

<template>
    <div class="w750">
        <div>
            <div v-if="detailData.submitStatus" class="text-center py-1" style="background: #fff7ed">
                <span class="font-14" style="color: #d68652">您已提交团购咨询，请耐心等待商家回复</span>
            </div>
            <div class="w-100" style="height: 500px">
                <img class="w-100 h-100" :src="$imgUrlHead + detailData.groupContent" alt="" />
            </div>
        </div>
        <div class="position-relative">
            <div class="position-absolute left-0 w-100 h-100vh" style="top: -72px">
                <div class="mx-1 bg-fff rounded-12" style="padding: 15px">
                    <div class="d-flex a-center py-1">
                        <div style="width: 40px; height: 40px">
                            <img src="@/assets/images/groupBy-phone.png" alt="" class="h-100 w-100" />
                        </div>
                        <div class="d-flex flex-column flex-1 ml">
                            <span class="font-14 text-333">商家号码</span>
                            <span class="text-999 font-12">{{ detailData.shopMobile }}</span>
                        </div>
                        <div class="rounded-14 border d-flex" style="padding: 5px 16px">
                            <a class="font-12" :href="'tel:' + detailData.shopMobile">拨打电话</a>
                        </div>
                    </div>
                    <div class="d-flex a-center mt-1 py-1">
                        <div style="width: 40px; height: 40px">
                            <img src="@/assets/images/groupBy-wechat.png" alt="" class="h-100 w-100" />
                        </div>
                        <div class="d-flex flex-column flex-1 ml">
                            <div class="d-flex font-14 a-center text-333">
                                <span>商家微信</span>
                                <span @click="show = true" class="iconfont iconqrcode ml-1"></span>
                            </div>
                            <span class="text-999 font-12">{{ detailData.shopWechatNo }}</span>
                        </div>
                        <div class="rounded-14 border d-flex" style="padding: 5px 16px">
                            <span v-clipboard:copy="detailData.shopWechatNo" v-clipboard:success="onCopy" v-clipboard:error="onError" class="font-12">
                                复制微信
                            </span>
                        </div>
                    </div>
                </div>
                <div class="mt-1 mx-1 bg-fff rounded-12" style="padding: 20px">
                    <div class="mb-1">
                        <input
                            v-if="!detailData.submitStatus"
                            v-model="groupData.consulteName"
                            class="bg-f8 w-100 px-1 rounded-8"
                            style="height: 50px"
                            placeholder="咨询人（必填）"
                            maxlength="50"
                        />
                        <template v-else>
                            <div class="d-flex font-14 mb-2 a-center">
                                <span class="text-666" style="width: 85px">咨询人：</span>
                                <span class="flex-1 font-16">{{ detailData.consulteName }}</span>
                            </div>
                        </template>
                    </div>
                    <div class="mb-1">
                        <input
                            v-if="!detailData.submitStatus"
                            v-model="groupData.consulteMobile"
                            class="bg-f8 w-100 px-1 rounded-8"
                            style="height: 50px"
                            placeholder="联系电话（必填）"
                            maxlength="11"
                        />
                        <template v-else>
                            <div class="d-flex font-14 mb-2 a-center">
                                <span class="text-666" style="width: 85px">联系电话：</span>
                                <span class="flex-1 font-16">{{ detailData.consulteMobile }}</span>
                            </div>
                        </template>
                    </div>
                    <!-- <div class="mb-1">
                        <input
                            v-if="!detailData.submitStatus"
                            v-model="groupData.unitName"
                            class="bg-f8 w-100 px-1 rounded-8"
                            style="height: 50px"
                            placeholder="单位名称（选填）"
                            maxlength="50"
                        />
                        <template v-else>
                            <div class="d-flex font-14 mb-2 a-center">
                                <span class="text-666" style="width: 85px">单位名称：</span>
                                <span class="flex-1 font-16">{{ detailData.unitName || '暂无' }}</span>
                            </div>
                        </template>
                    </div>
                    <div>
                        <input
                            v-if="!detailData.submitStatus"
                            v-model="groupData.recommendName"
                            class="bg-f8 w-100 px-1 rounded-8"
                            style="height: 50px"
                            placeholder="推荐人手机（选填）"
                            maxlength="11"
                        />
                        <template v-else>
                            <div class="d-flex font-14 a-center">
                                <span class="text-666" style="width: 85px">推荐人手机：</span>
                                <span class="flex-1 font-16">{{ detailData.recommendName || '暂无' }}</span>
                            </div>
                        </template>
                    </div> -->
                    <div class="mt-4" v-if="!detailData.submitStatus">
                        <div
                            @click="submitGroup"
                            class="py-1 text-fff text-center rounded-20 bg-main"
                            style="padding: 10px 0; margin: 0 37px"
                        >
                            <span>确认提交</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 二维码dialog -->
        <van-dialog v-model="show" :show-confirm-button="false" close-on-click-overlay>
            <div class="p-1">
                <div class="font-14 font-weight py text-center">
                    <span>客服咨询</span>
                </div>
                <div style="width: 160px; height: 160px; margin: 20px auto">
                    <img :src="$imgUrlHead + detailData.shopWechatCode" class="w-100 h-100" />
                </div>
                <div class="text-center mt-2">
                    <div class="p-1 border font-12 w-100">长按二维码保存</div>
                </div>
            </div>
        </van-dialog>
    </div>
</template>

<script>
import { getGroupCuntomConsulte, saveGroupCuntomConsulte } from '@/api/group'
import formCheck from '@/utils/formCheck'

export default {
    name: '',
    components: {},
    data() {
        return {
            contactPhone: '', // 联系电话
            contactWechat: '', // 商家微信
            show: false,
            detailData: '', // 配置信息
            groupData: {
                consulteName: '', // 咨询人
                consulteMobile: '', // 联系电话（必填）
                unitName: '', // 单位名称
                recommendName: '' // 推荐人手机
            }
        }
    },
    computed: {},
    watch: {},
    created() {},
    destroyed() {},
    mounted() {
        this.getDetail()
    },
    methods: {
        // 获取配置
        getDetail() {
            getGroupCuntomConsulte()
                .then((res) => {
                    if (!res.success) return void this.$toast(res.msg)

                    this.detailData = res.result
                })
                .catch((err) => {
                })
        },

        // 提交
        submitGroup() {
			if (!this.groupData.consulteName || !this.groupData.consulteMobile) {
			    this.$toast('请填写好表格~')
			    return
			}
			
			let errMsg = formCheck.phoneRight(this.groupData.consulteMobile, '请输入正确的电话号码~')
			
			if (this.groupData.recommendName) {
			    errMsg = formCheck.phoneRight(this.groupData.recommendName, '请输入正确的联系人电话号码~')
			}
			
			if (errMsg) {
			    this.$toast(errMsg)
			    return
			}
            this.$utils.uDebounce(()=>{
				saveGroupCuntomConsulte(this.groupData)
				    .then((res) => {
				        if (!res.success) {
				            this.$toast(res.msg)
				            return
				        }
				        this.$toast({
				            message: '提交成功',
				            onClose: () => {
				                this.$router.push({ name: 'my' })
				            }
				        })
				    })
				    .catch((err) => {
				    })
			})
        },

        onCopy() {
            this.$toast.success({
                message: '复制成功',
                duration: 1000
            })
        },
        onError() {
            this.$toast.fail({
                message: '内复制失败',
                duration: 1000
            })
        },

        confirm() {
            this.show = true
        }
    }
}
</script>

<style lang="scss" scoped></style>
